@user.main("登录") {

    <style>

            .nav-tabs{
                display: flex;
                list-style: none;
                border-bottom: 1px solid #e6e6e6;
                padding-left: 10px;
            }

            .nav-item{
                padding: 7px 15px;
                margin-bottom: -1px;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
                color: #2D8B67;
            }

            .nav-item:hover{
                background-color: #e6e6e6;
                cursor: pointer;
            }

            .active{
                border: 1px solid #e6e6e6;
                border-bottom: 1px solid white;
            }


    </style>

    <div class="box-right">

        <p class="page-title">复旦带出样本在线申请系统</p>
        <p class="page-title" style="font-size: 25px">登录</p>

        <ul class="nav nav-tabs" style="margin-bottom: 20px">
            <li class="nav-item active" id="pwd-tab">
                密码登录
            </li>
            <li class="nav-item" id="msg-tab">
                手机短信登录
            </li>
        </ul>


        <form id="pwdForm">
            <div class="row form-group">

                <input type="text" placeholder="账号" class="form-input" name="phone"  style="font-family: password"/>
                <i class="fa fa-user fa-icon"></i>


            </div>

            <div class="row form-group">
                <input type="password" placeholder="密码" class="form-input" name="pwd"/>
                <i class="fa fa-unlock-alt fa-icon"></i>
            </div>

            <div class="row">
                <button type="button" class="btn btn-narrow" onclick="PwdLogin()">立即登录</button>
            </div>

            <a href="#">
                <div class="row">
                    <button type="button" class="btn btn-narrow" >注册</button>
                </div>
            </a>

            <div class="row-login">

                <p><a href="@routes.UserController.loginPage()">忘记密码？</a></p>
            </div>
        </form>

        <form id="msgForm"  style="display: none">
            <div class="row form-group">
                <input type="text" placeholder="账号" class="form-input" name="phone"  style="font-family: password"/>
                <i class="fa fa-user fa-icon"></i>
            </div>

            <div class="row form-group">
                <input type="text" placeholder="手机验证码" class="form-input" name="code" style="width: 70%"/>
                <i class="fa fa-shield  fa-icon"></i>
                <input type="button" class="form-input code" id="code" value="获取验证码" onclick="createCode('#msgForm')"  />
                <small class="help-block" id="code-error"></small>

            </div>

            <div class="row">
                <button type="button" class="btn btn-narrow" onclick="MsgLogin()">立即登录</button>
            </div>

            <div class="row-login">

                <p><a href="@routes.UserController.loginPage()">忘记密码？</a></p>
            </div>
        </form>

    </div>


    <script>

            $(function () {
                loginFormValidation()
            })

            function PwdLogin() {
                let form = $("#pwdForm");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    $.ajax({
                        url: "/pwdLogin",
                        type: "post",
                        data: form.serialize(),
                        success: function (data) {
                            if (data === 500) {
                                swal("错误", "用户名或密码错误", "error")
                            } else if(data === 501){
                                swal("错误", "账号还未通过审核，请稍后再试", "error")
                            }else{
                                window.location.href = "@routes.HomeController.index()"
                                //form.submit()由于在firefox中不执行，故换成：
                                // document.forms[0].submit();
                            }
                        }
                    })
                }
            }

            function MsgLogin() {
                $("#code-error").empty();
                let form = $("#msgForm");
                form.formValidation("revalidateField", "code");
                let fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    $.ajax({
                        url: "@routes.UserController.msgLogin()",
                        type: "post",
                        data: form.serialize(),
                        success: function (data) {
                            if (data === 500) {
                                swal("错误", "用户名或密码错误", "error")
                            } else if(data === 501){
                                swal("错误", "账号还未通过审核，请稍后再试", "error")
                            } else if(data === 502){
                                swal("错误", "验证码错误，请重新输入", "error")
                            }else{
                                window.location.href = "@routes.ReportController.reportApplyPage()"

                                //form.submit()由于在firefox中不执行，故换成：
                                //     document.forms[0].submit();
                            }
                        }
                    })
                }
            }

            $(".nav-item").click(function () {
                const  id = $(this).attr("id")
                if(id === "pwd-tab"){
                    $("#pwdForm").show();
                    $("#msgForm").hide();
                    $("#pwd-tab").addClass("active");
                    $("#msg-tab").removeClass("active")
                }else{
                    $("#pwdForm").hide();
                    $("#msgForm").show();
                    $("#pwd-tab").removeClass("active");
                    $("#msg-tab").addClass("active")
                }
            })


    </script>

}
